<template>
    <div class="container">
        <!-- 页头 -->
        <Header v-bind:isBack="isBack" :title="title"></Header>

        <!-- 订单 -->
        <div class="myOrder">
            <div class="orderType">
                <div class="waitPay" :class="{selection: status == 1}" @click="changeStatus(1)">
                    <div>待支付</div>
                    <div class="line" :class="{line_selection: status == 1}"></div>
                </div>
                <div class="waitIssue" :class="{selection: status == 2}" @click="changeStatus(2)">
                    <div>待发货</div>
                    <div class="line" :class="{line_selection: status == 2}"></div>
                </div>
                <div class="waitReceive" :class="{selection: status == 3}" @click="changeStatus(3)">
                    <div>待收货</div>
                    <div class="line" :class="{line_selection: status == 3}"></div>
                </div>
            </div>
            <div class="orderList">
                <div class="order" v-for="item in list" :key="item.id" @click="toWhere()">
                    <div class="top">
                        <div class="time">{{ item.time }}</div>
                        <div class="type">{{ item.type == 1? '待支付' : item.type == 2? '待发货' : '待收货'}}</div>
                    </div>
                    <div class="center">
                        <img src="" alt="">
                        <div class="information">
                            <div class="name_price">
                                <div class="name">{{ item.name }}</div>
                                <div class="price">¥{{ item.price }}</div>
                            </div>
                            <div class="tips_num">
                                <div class="tips">{{ item.tips }}</div>
                                <div class="num">×{{ item.num }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="sumPrice">共{{ item.num }}件     总计: ¥{{ item.num * item.price }}</div>
                        <div class="yes">
                            <div class="service" v-if="status == 3">联系客服</div>
                            <div class="pay" v-if="status == 1">立即支付</div>
                            <div class="pay" v-if="status == 3">确认收货</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "order-list",
  data() {
    return {
      isBack: true,
      title: "我的订单",
      status: 1,
      list: [
        {
          type: 1,
          name: "2019周洁琼 霍尊《醉赤 壁＋日不落醉赤壁》",
          time: "2019-02-01",
          image: "",
          num: "3",
          price: "300",
          tips: "已选场次、已选门票"
        },
        {
          type: 2,
          name: "2019周洁琼 霍尊《醉赤 壁＋日不落醉赤壁》",
          time: "2019-02-01",
          image: "",
          num: "5",
          price: "100",
          tips: "已选场次、已选门票"
        },
        {
          type: 3,
          name: "2019周洁琼 霍尊《醉赤 壁＋日不落醉赤壁》",
          time: "2019-02-01",
          image: "",
          num: "1",
          price: "200",
          tips: "已选场次、已选门票"
        }
      ],
    };
  },

  methods: {
    changeStatus(status) {
      this.status = status;
    },

    toWhere() {
      this.$router.push({ path: "/index/order-detail" });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 1rem 0 0 0;

  .myOrder {
    padding-top: 0.88rem;

    .orderType {
      width: 100%;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      position: fixed;
      top: 1rem;

      > div {
        width: 33.3%;
        height: 0.88rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .line {
          width: 0.4rem;
          height: 0.06rem;
          margin: 0 auto;
          border-radius: 0.03rem;
          margin-top: 0.18rem;
        }
      }

      .selection {
        color: rgba(84, 4, 121, 1);
        font-weight: bold;
      }

      .line_selection {
        background: rgba(84, 4, 121, 1);
      }
    }

    .orderList {
      .order {
        background-color: #fff;
        margin-top: 0.24rem;
      }

      .top {
        height: 0.88rem;
        line-height: 0.88rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.23rem;
        font-size: 0.28rem;

        .type {
          color: rgba(244, 67, 73, 1);
        }
      }

      .center {
        padding: 0.24rem;
        display: flex;
        justify-content: space-between;
        border-top: 0.015rem solid #e9e9e9;
        border-bottom: 0.015rem solid #e9e9e9;

        img {
          width: 2.11rem;
          height: 2.37rem;
          background-color: pink;
        }

        .information {
          width: 4.91rem;
          height: 2.37rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-left: 0.2rem;

          > div {
            display: flex;
            justify-content: space-between;
          }

          .name_price {
            display: flex;
            flex-grow: 2;
            font-size: 0.32rem;

            .name {
              width: 3.4rem;
            }
          }

          .tips_num {
            display: flex;
            flex-grow: 1;
            font-size: 0.28rem;
            color: rgba(153, 153, 153, 1);

            .tips {
              width: 3.4rem;
            }
          }
        }
      }

      .bottom {
        height: 1.72rem;
        padding: 0.25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        box-sizing: border-box;

        .sumPrice {
          font-size: 0.28rem;
          color: rgba(153, 153, 153, 1);
          white-space: pre;
        }

        .yes {
            display: flex;
            justify-content: flex-end;
        }

        .service {
          width: 1.6rem;
          height: 0.6rem;
          line-height: 0.6rem;
          border: 0.015rem solid rgba(233, 233, 233, 1);
          border-radius: 0.1rem;
          text-align: center;
          font-size: 0.28rem;
          margin-right: 0.2rem;
        }

        .pay {
          width: 1.6rem;
          height: 0.6rem;
          line-height: 0.6rem;
          border: 0.015rem solid rgba(248, 88, 89, 1);
          border-radius: 0.1rem;
          text-align: center;
          font-size: 0.28rem;
          color: rgba(244, 67, 73, 1);
        }
      }
    }
  }
}
</style>